<template>
    <div>
        <h1>房号显示</h1>
        房号名称：<input type="text" v-model="fh.name">
        <input type="button" value="查询" @click="ShowN">
        <input type="button" value="上架" @click="ZhuangTai(0)">
        <input type="button" value="下架" @click="ZhuangTai(1)">
        <table class="table table-bordered">
            <tr>
                <td>
                    <input type="checkbox" v-model="checkAll" @click="checkAllFn">
                </td>
                <td>房号名称</td>
                <td>房型</td>
                <td>房态</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list">
                <td>
                    <input type="checkbox" :value="item.id" v-model="ids">
                </td>
                <td>{{ item.name }}</td>
                <td>{{ item.housex }}</td>
                <td>{{ item.houset }}</td>
                <td>{{ item.state == 0 ? '上架' : '下架' }}</td>
                <td>
                    <input type="button" value="修改" @click="FanTian(item.id)">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
let router = useRouter();
let route = useRoute();

let data: any = reactive({
    fh: {
        name:"",
    },
    checkAll:false,
    ids:[],
    list:[],
});
let { fh, checkAll, ids, list } = toRefs(data);
onMounted(() => {
    ShowN();
})

const ShowN = () => {
    let obj = {
        name: fh.value.name,
    };

    axios({
        url: '/api/HousN/HNList',
        method: 'get',
        params: obj,
    }).then((res) => {
        list.value = res.data.data;
    })
}

const checkAllFn = () => {
    checkAll.value = !checkAll.value;
    if (checkAll.value == true) {
        ids.value = list.value.map((item: any) => {
            return item.id;
        })
    } else {
        ids.value = [];
    }
}

const ZhuangTai = (state: any) => {
    if (ids.value.length == 0) {
        alert('请选择要修改的房源');
        return;
    }
    let ress = confirm('确定要修改吗？');
    if (ress) {
        let obj = {
            ids: ids.value.toString(),
            state: state,
        }
        axios({
            url: '/api/HousN/StateAll',
            method: 'put',
            params: obj,
        }).then((res) => {
            if (res.data.data == 1) {
                alert('修改成功');
                checkAll.value = false;
                ShowN();
            }
            else {
                alert('修改失败');
            }
        })
    }

}

const FanTian = (id: any) => {
    router.push({
        path: '/updn',
        query: {
            id: id
        }
    })
}
</script>

<style scoped></style>